﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Top 10 Express Table Designs - Smashing Magazine Source</title>
    <style>
        <!--
        @import url(style.css);
        -->
    </style>
</head>
<body>
    <div>
        Quote from:<a href="https://www.smashingmagazine.com/2008/08/top-10-css-table-designs/">Top 10 CSS Table Designs </a>
    </div>
    <h3>
        1. Horizontal Minimalist
    </h3>
    <p>
        Simply set enough padding to the cells (td and th) and put a 2 pixel border underneath the header.
    </p>
    <table id="hor-minimalist-a" summary="Employee Pay Sheet">
        <thead>
            <tr>
                <th scope="col">Employee</th>
                <th scope="col">Salary</th>
                <th scope="col">Bonus</th>
                <th scope="col">Supervisor</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Stephen C. Cox</td>
                <td>$300</td>
                <td>$50</td>
                <td>Bob</td>
            </tr>
            <tr>
                <td>Josephin Tan</td>
                <td>$150</td>
                <td>-</td>
                <td>Annie</td>
            </tr>
            <tr>
                <td>Joyce Ming</td>
                <td>$200</td>
                <td>$35</td>
                <td>Andy</td>
            </tr>
            <tr>
                <td>James A. Pentel</td>
                <td>$175</td>
                <td>$25</td>
                <td>Annie</td>
            </tr>

        </tbody>
    </table>
    <p>
        Because horizontal tables are supposed to be scanned horizontally, clearing the border of the table increases the efficiency of the table.
        The lack of border, however, makes this table design hard to read if it has too many rows. To counter it we simply add 1 pixel border underneath all td elements:
    </p>
    <table id="hor-minimalist-b" summary="Employee Pay Sheet">
        <thead>
            <tr>
                <th scope="col">Employee</th>
                <th scope="col">Salary</th>
                <th scope="col">Bonus</th>
                <th scope="col">Supervisor</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Stephen C. Cox</td>
                <td>$300</td>
                <td>$50</td>
                <td>Bob</td>
            </tr>
            <tr>
                <td>Josephin Tan</td>
                <td>$150</td>
                <td>-</td>
                <td>Annie</td>
            </tr>
            <tr>
                <td>Joyce Ming</td>
                <td>$200</td>
                <td>$35</td>
                <td>Andy</td>
            </tr>
            <tr>
                <td>James A. Pentel</td>
                <td>$175</td>
                <td>$25</td>
                <td>Annie</td>
            </tr>
        </tbody>

    </table>

    <h3>2. Vertical Minimalist</h3>
    <p>
        Add large border-left and border-right with the same color as background. You can use transparent borders if you want, but IE 6 screws it all up. Since this table is supposed to be read from top to bottom (vertically), adding tr:hover does not help and instead makes it harder to read the data. There is perhaps a Javascript-based solution which enables you to highlight the whole column when a mouseover event occurs, but that’s beyond the scope of this article.
    </p>
    <table id="ver-minimalist" summary="Most Favorite Movies">
        <thead>
            <tr>
                <th scope="col">Comedy</th>
                <th scope="col">Adventure</th>
                <th scope="col">Action</th>
                <th scope="col">Children</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Scary Movie</td>
                <td>Indiana Jones</td>
                <td>The Punisher</td>
                <td>Wall-E</td>
            </tr>
            <tr>
                <td>Epic Movie</td>
                <td>Star Wars</td>
                <td>Bad Boys</td>
                <td>Madagascar</td>
            </tr>
            <tr>
                <td>Spartan</td>
                <td>LOTR</td>
                <td>Die Hard</td>
                <td>Finding Nemo</td>
            </tr>
            <tr>
                <td>Dr. Dolittle</td>
                <td>The Mummy</td>
                <td>300</td>
                <td>A Bug's Life</td>
            </tr>
        </tbody>
    </table>
    <h3>3. Box</h3>
    <table id="box-table-a" summary="Employee Pay Sheet">
        <thead>
            <tr>
                <th scope="col">Employee</th>
                <th scope="col">Salary</th>
                <th scope="col">Bonus</th>
                <th scope="col">Supervisor</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Stephen C. Cox</td>
                <td>$300</td>
                <td>$50</td>
                <td>Bob</td>
            </tr>
            <tr>
                <td>Josephin Tan</td>
                <td>$150</td>
                <td>-</td>
                <td>Annie</td>
            </tr>
            <tr>
                <td>Joyce Ming</td>
                <td>$200</td>
                <td>$35</td>
                <td>Andy</td>
            </tr>
            <tr>
                <td>James A. Pentel</td>
                <td>$175</td>
                <td>$25</td>
                <td>Annie</td>
            </tr>

        </tbody>
    </table>
    <table id="box-table-b">
        <thead>
            <tr>
                <th scope="col">Comedy</th>
                <th scope="col">Adventure</th>
                <th scope="col">Action</th>
                <th scope="col">Children</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Scary Movie</td>
                <td>Indiana Jones</td>
                <td>The Punisher</td>
                <td>Wall-E</td>
            </tr>
            <tr>
                <td>Epic Movie</td>
                <td>Star Wars</td>
                <td>Bad Boys</td>
                <td>Madagascar</td>
            </tr>
            <tr>
                <td>Spartan</td>
                <td>LOTR</td>
                <td>Die Hard</td>
                <td>Finding Nemo</td>
            </tr>
            <tr>
                <td>Dr. Dolittle</td>
                <td>The Mummy</td>
                <td>300</td>
                <td>A Bug's Life</td>
            </tr>
        </tbody>

    </table>
    <h3>4. Horizontal Zebra</h3>
    <p>
        To style a table as zebra, simply put a class="odd" to every odd ordered tr tag and define a style for it (e.g. using if ($count % 2) then even class else odd class in PHP).
    </p>
    <table id="hor-zebra" summary="Employee Pay Sheet">
        <thead>
            <tr>
                <th scope="col">Employee</th>
                <th scope="col">Salary</th>
                <th scope="col">Bonus</th>
                <th scope="col">Supervisor</th>
            </tr>
        </thead>
        <tbody>
            <tr class="odd">
                <td>Stephen C. Cox</td>
                <td>$300</td>
                <td>$50</td>
                <td>Bob</td>
            </tr>
            <tr>
                <td>Josephin Tan</td>
                <td>$150</td>
                <td>-</td>
                <td>Annie</td>
            </tr>
            <tr class="odd">
                <td>Joyce Ming</td>
                <td>$200</td>
                <td>$35</td>
                <td>Andy</td>
            </tr>
            <tr>
                <td>James A. Pentel</td>
                <td>$175</td>
                <td>$25</td>
                <td>Annie</td>
            </tr>
        </tbody>
    </table>
    <h3>5.Vertical Zebra Style</h3>
    <p>
        Vertical zebra is easier to style than the horizontal one, as we can make use of
        colgroup and col elements to distribute column classes.
        However, the makeup becomes a little bit behavier:
    </p>
    <table id="ver-zebra" summary="My Favorite Move">
        <colgroup>
            <col class="vzebra-odd" />
            <col class="vzebra-even" />
            <col class="vzebra-odd" />
            <col class="vzebra-even" />
        </colgroup>
        <thead>
            <tr>
                <td scope="col" id="vzebra-comedy">Comedy</td>
                <td scope="col" id="vzebra-adventure">Adventure</td>
                <td scope="col" id="vzebra-action">Action</td>
                <td scope="col" id="vzebra-children">Children</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Scary Movie</td>
                <td>Indiana Jones</td>
                <td>The Punisher</td>
                <td>Wall-E</td>
            </tr>
            <tr>
                <td>Epic Movie</td>
                <td>Star War</td>
                <td>Bad Boy</td>
                <td>Madagascar</td>
            </tr>
            <tr>
                <td>Spartan</td>
                <td>LOTR</td>
                <td>Die Hard</td>
                <td>Find Nemo</td>
            </tr>
            <tr>
                <td>Dr. Dolitte</td>
                <td>The Mummy</td>
                <td>300</td>
                <td>A Bug's Life</td>
            </tr>
        </tbody>
    </table>
    <h3>6.One Column Emphasis</h3>
    <p>If that's the case, you can use colgroup and col to make that particular column stand out.</p>
    <table id="one-column-emphasis" summary="2007 Major IT Companies' Profit">
        <colgroup>
            <col class="oce-first" />
        </colgroup>
        <thead>
            <tr>
                <th scope="col">Company</th>
                <th scope="col">Q1</th>
                <th scope="col">Q2</th>
                <th scope="col">Q3</th>
                <th scope="col">Q4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Microsoft</td>
                <td>20.3</td>
                <td>30.5</td>
                <td>23.5</td>
                <td>40.3</td>
            </tr>
            <tr>
                <td>Google</td>
                <td>50.2</td>
                <td>40.63</td>
                <td>45.23</td>
                <td>39.3</td>
            </tr>
            <tr>
                <td>Apple</td>
                <td>25.4</td>
                <td>30.2</td>
                <td>33.3</td>
                <td>36.7</td>
            </tr>
            <tr>
                <td>IBM</td>
                <td>20.4</td>
                <td>15.6</td>
                <td>22.3</td>
                <td>29.3</td>
            </tr>
        </tbody>
    </table>
    <h3>7.Newspaper</h3>
    <p>

    </p>
    <table id="newspaper-a" summary="2007 Major IT Companies' Profit">
        <thead>
            <tr>
                <th scope="col">Company</th>
                <th scope="col">Q1</th>
                <th scope="col">Q2</th>
                <th scope="col">Q3</th>
                <th scope="col">Q4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Microsoft</td>
                <td>20.3</td>
                <td>30.5</td>
                <td>23.5</td>
                <td>40.3</td>
            </tr>
            <tr>
                <td>Google</td>
                <td>50.2</td>
                <td>40.63</td>
                <td>45.23</td>
                <td>39.3</td>
            </tr>
            <tr>
                <td>Apple</td>
                <td>25.4</td>
                <td>30.2</td>
                <td>33.3</td>
                <td>36.7</td>
            </tr>
            <tr>
                <td>IBM</td>
                <td>20.4</td>
                <td>15.6</td>
                <td>22.3</td>
                <td>29.3</td>
            </tr>
        </tbody>
    </table>

    <table id="newspaper-b" summary="2007 Major IT Companies' Profit">
        <thead>
            <tr>
                <th scope="col">Company</th>
                <th scope="col">Q1</th>
                <th scope="col">Q2</th>
                <th scope="col">Q3</th>
                <th scope="col">Q4</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="5"><em>The above data were fictional and made up, please do not sue me</em></td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Microsoft</td>
                <td>20.3</td>
                <td>30.5</td>
                <td>23.5</td>
                <td>40.3</td>
            </tr>
            <tr>
                <td>Google</td>
                <td>50.2</td>
                <td>40.63</td>
                <td>45.23</td>
                <td>39.3</td>
            </tr>
            <tr>
                <td>Apple</td>
                <td>25.4</td>
                <td>30.2</td>
                <td>33.3</td>
                <td>36.7</td>
            </tr>
            <tr>
                <td>IBM</td>
                <td>20.4</td>
                <td>15.6</td>
                <td>22.3</td>
                <td>29.3</td>
            </tr>
        </tbody>
    </table>

    <table id="newspaper-c" summary="Personal Movie Rating">
        <thead>
            <tr>
                <th scope="col">Favorite</th>
                <th scope="col">Great</th>
                <th scope="col">Nice</th>
                <th scope="col">Bad</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Passion of the Christ</td>
                <td>Bourne Ultimatum</td>
                <td>Shoot 'Em Up</td>
                <td>Ali</td>
            </tr>
            <tr>
                <td>The Big Fish</td>
                <td>The Mummy</td>
                <td>Apocalypto</td>
                <td>Monster</td>
            </tr>
            <tr>
                <td>Shawshank Redemption</td>
                <td>Cold Mountain</td>
                <td>Indiana Jones</td>
                <td>Dead or Alive</td>
            </tr>
            <tr>
                <td>Greatest Story Ever Told</td>
                <td>I Am Legend</td>
                <td>Star Wars</td>
                <td>Saw 3</td>
            </tr>
        </tbody>
    </table>
    <h3>8.Rounded Corner</h3>
    <p>
        Create images for all four corner of your table. Theoretically, we can make use of
        the nesting tr and td elements to place the left and right corners of the table without
        adding additional makeup.
    </p>
    <table id="rounded-corner" summary="2007 Major IT Companies' Profit">
        <thead>
            <tr>
                <th scope="col" class="rounded-company">Company</th>
                <th scope="col" class="rounded-q1">Q1</th>
                <th scope="col" class="rounded-q2">Q2</th>
                <th scope="col" class="rounded-q3">Q3</th>
                <th scope="col" class="rounded-q4">Q4</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="4" class="rounded-foot-left"><em>The above data were fictional and made up, please do not sue me</em></td>
                <td class="rounded-foot-right">&nbsp;</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Microsoft</td>
                <td>20.3</td>
                <td>30.5</td>
                <td>23.5</td>
                <td>40.3</td>
            </tr>
            <tr>
                <td>Google</td>
                <td>50.2</td>
                <td>40.63</td>
                <td>45.23</td>
                <td>39.3</td>
            </tr>
            <tr>
                <td>Apple</td>
                <td>25.4</td>
                <td>30.2</td>
                <td>33.3</td>
                <td>36.7</td>
            </tr>
            <tr>
                <td>IBM</td>
                <td>20.4</td>
                <td>15.6</td>
                <td>22.3</td>
                <td>29.3</td>
            </tr>
        </tbody>
    </table>
    <h3>9.Table Background</h3>
    <p>
        You can add 50% grey png-image as background-image of the cells to improve readability, and that means that you
        need a CSS-hack to make it work in IE 6:
        * html table tbody td
        {

        /* IE CSS Filter Hack goes here*/

        }
    </p>
    <table id="background-image" summary="Meeting Results">
        <thead>
            <tr>
                <th scope="col">Employee</th>
                <th scope="col">Division</th>
                <th scope="col">Suggestions</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="4">IE 6 users won't see the transparent background if the hack is not applied</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Stephen C. Cox</td>
                <td>Marketing</td>
                <td>Make discount offers</td>
            </tr>
            <tr>
                <td>Josephin Tan</td>
                <td>Advertising</td>
                <td>Give bonuses</td>
            </tr>
            <tr>
                <td>Joyce Ming</td>
                <td>Marketing</td>
                <td>New designs</td>
            </tr>
            <tr>
                <td>James A. Pentel</td>
                <td>Marketing</td>
                <td>Better Packaging</td>
            </tr>
        </tbody>
    </table>
    <h3>10.Cell Background</h3>
    <p>
        Start your Photoshop and make 1 pixel width gradients, and set them as
        background-image of all cells. You'll end up with a gradient style table:
    </p>
    <table id="gradient-style" summary="Meeting Results">
        <thead>
            <tr>
                <th scope="col">Employee</th>
                <th scope="col">Division</th>
                <th scope="col">Suggestions</th>
                <th scope="col">Rating</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="4">Give background color to the table cells to achieve seamless transition</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Stephen C. Cox</td>
                <td>Marketing</td>
                <td>Make discount offers</td>
                <td>3/10</td>
            </tr>
            <tr>
                <td>Josephin Tan</td>
                <td>Advertising</td>
                <td>Give bonuses</td>
                <td>5/10</td>
            </tr>
            <tr>
                <td>Joyce Ming</td>
                <td>Marketing</td>
                <td>New designs</td>
                <td>8/10</td>
            </tr>
            <tr>
                <td>James A. Pentel</td>
                <td>Marketing</td>
                <td>Better Packaging</td>
                <td>8/10</td>
            </tr>
        </tbody>
    </table>
    <p>
        Similarly, pick a pattern and set it as background-image and you'll end up with
        a pattern-styled-table:
    </p>
    <table id="pattern-style-a" summary="Meeting Results">
        <thead>
            <tr>
                <th scope="col">Employee</th>
                <th scope="col">Salary</th>
                <th scope="col">Bonus</th>
                <th scope="col">Supervisor</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Stephen C. Cox</td>
                <td>$300</td>
                <td>$50</td>
                <td>Bob</td>
            </tr>
            <tr>
                <td>Josephin Tan</td>
                <td>$150</td>
                <td>-</td>
                <td>Annie</td>
            </tr>
            <tr>
                <td>Joyce Ming</td>
                <td>$200</td>
                <td>$35</td>
                <td>Andy</td>
            </tr>
            <tr>
                <td>James A. Pentel</td>
                <td>$175</td>
                <td>$25</td>
                <td>Annie</td>
            </tr>
        </tbody>
    </table>
    <table id="pattern-style-b" summary="Meeting Results">
        <thead>
            <tr>
                <th scope="col">Nation</th>
                <th scope="col">Capital</th>
                <th scope="col">Language</th>
                <th scope="col">Unique</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Japan</td>
                <td>Tokyo</td>
                <td>Japanese</td>
                <td>Karate</td>
            </tr>
            <tr>
                <td>South Korea</td>
                <td>Seoul</td>
                <td>Korean</td>
                <td>Ginseng</td>
            </tr>
            <tr>
                <td>China</td>
                <td>Beijing</td>
                <td>Mandarin</td>
                <td>Kung-Fu</td>
            </tr>
            <tr>
                <td>Indonesia</td>
                <td>Jakarta</td>
                <td>Indonesian</td>
                <td>Batik</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
